<template>
  <el-dropdown trigger="click" @command="handleSetLanguage">
    <div class="dropdown-title">
      <svg-icon class-name="international-icon" icon-class="international" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command='zh'>简体中文</el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command='en'>English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script type="text/ecmascript-6">
export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('setLanguage', lang)
      this.$message({
        message: 'Switch Language Success',
        type: 'success'
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dropdown-title {
    padding: 0 12px;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s;
    &:hover { background-color: #f9f9f9; }
    .international-icon {
      font-size: 16px;
      fill: rgba(0, 0, 0, 0.8);
      cursor: pointer;
      vertical-align: middle;
    }
  }

</style>
